<script setup>
import { ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import Line from '../echarts/Line.vue'
import pie from '../echarts/Pie.vue'
const radio = ref('week')
const option =  ref({})
const props = defineProps(['title', 'type'])
</script>

<template>
  <yk-space dir="vertical" :size="24" class="card">
    <yk-space align="center" justify ="between" class ="head">
      <div class="title">{{ props.title }}</div>
      <div class="time">
        <yk-radio-group v-model="radio" type="button" :solid="true">
          <yk-radio value="week">近一周</yk-radio>
          <yk-radio value="month">近一月</yk-radio>
        </yk-radio-group>
      </div>
    </yk-space>
    <div class="charts">
      <yk-space v-if="props.type === 'line'" class="charts-item" ><Line name="a" /></yk-space>
      <yk-space v-else class="charts-item">
        <Pie name="b"/>
        <Pie name="c"/>
        </yk-space>
    </div> 
  </yk-space>
</template>

<style scoped lang='less'>
.card {
  width: 100%;
  height: 308px;
  background-color: @bg-color-l;
  border-radius: 8px;
  padding: 24px;

  .head {
    width: 100%;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    color: @gray-10;
  }
  .charts {
    width: 100%;
    height: 100%;

    .charts-item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>